{% extends "base.html" %}

{% load static wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-homepage{% endblock %}

{% block content %}

    <div class="row mb-2 mt-3">
        <div class="col-lg-8 mb-2">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner rounded">

                    {% for wallpaper in wallpapers %}

                        {% image wallpaper max-800x600 as wallpaper_800x600 %}
                        {% image wallpaper original as wallpaper_original %}
                        {{ first|add:1 }}
                        <div {% if forloop.first %} class="carousel-item active"{% else %} class="carousel-item"{% endif %}>
                            <a href="{{ wallpaper_original.url }}">
                                <img class="d-block w-100 " src="{{ wallpaper_800x600.url }}">
                            </a>
                        </div>
                    {% endfor %}

                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card text-center mb-2">
                <div class="card-body">
                    <div>
                        <a href="/">
                            <img class="shadow p-2 mb-2 bg-white rounded-circle"
                                style="width:120px; height:120px; border-radius:50%; overflow:hidden;"
                                src="{% static 'favicon-32x32.ico' %}" alt="Logo - 站点Log" />
                        </a>
                    </div>
                    <h5 class="card-title"><a href="#">首页</a></h5>
                    <p class="card-text">Slow Rhythm of Life.</p>
                </div>
            </div>
            <div class="card text-center mb-2">
                <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card-deck mb-2">

        {% for post in blogpages %}
            {% with post=post.specific %}

                <div class="card">

                        {% with post.main_image as main_image %}
                            {% if main_image %}
                                {% image main_image fill-320x240 as header_image %}
                                <a href="{% pageurl post %}">
                                    <img src="{{ header_image.url }}"  class="card-img-top" />
                                </a>
                            {% endif %}
                        {% endwith %}

                        <div class="card-body">
                        <h5 class="card-title"><a href="{% pageurl post %}">{{ post.title }}</a></h5>
                        <p class="card-text">
                            {% if post.intro %}
                                {{ post.intro|richtext }}
                            {% else %}
                                {{ post.body|richtext|truncatewords_html:80 }}
                            {% endif %}
                        </p>
                    </div>

                    <div class="card-footer">
                        <small class="text-muted"><a href="{% pageurl post %}" class="btn btn-primary">阅读全文</a></small>
                    </div>
                </div>

            {% endwith %}
        {% endfor %}

    </div>

    <hr>
        <a class="nav-link text-center" href="/blog">更多文章</a>
    <hr>

    <div class="card text-center mb-2">
        <div class="card-body">
            <a href="{% slugurl 'tags' %}?tag=django" class="mr-2">django</a>
            <a href="{% slugurl 'tags' %}?tag=Linux" class="mr-2">Linux</a>
            <a href="{% slugurl 'tags' %}?tag=Python" class="mr-2">Python</a>
            <a href="{% slugurl 'tags' %}?tag=VPS" class="mr-2">VPS</a>
            <a href="{% slugurl 'tags' %}?tag=Wagtail" class="mr-2">Wagtail</a>
        </div>
    </div>

{% endblock %}